<!-- <template>
  <div class="full-height full-width">
    <el-amap
      ref="map"
      map-style="amap://styles/darkblue"
      :center="center"
      :zoom="zoom"
      @init="setMap"
      @movestart="moving = true"
      style="z-index: 99;width:100%"
      @moveend="moving = false"
    >
      <el-amap-polyline
        :path="polyLine"
        v-bind="polyLineStyle"
        v-if="polyLine.length"
      />
      <el-amap-layer-labels ref="labels" :visible="visible" :collision="false">
        <el-amap-label-marker
          v-for="item in labelOptions"
          :key="item.value"
          :position="item.position"
          :icon="item.icon"
          :visible="visible"
          @click="clickMarker"
        >
        </el-amap-label-marker>
      </el-amap-layer-labels>
      <el-amap-layer-vector :visible="visible">
        <el-amap-circle :center="center" :radius="100" />
      </el-amap-layer-vector>
    </el-amap>
  </div>
</template>
<script>
import Vue from "vue";
import { wgsToGcj } from "@/utils/coordinateConvertor";
import VueAMap from "@vuemap/vue-amap/dist";
import "@vuemap/vue-amap/dist/style.css";
import { outline } from "@/api/mock";
import { mapState } from "vuex";
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: "80e1d7e8260397feafba77e2563c8895"
});
const center = { lng: 113.620761, lat: 23.213839 };

export default {
  data() {
    return {
      center: Object.values(wgsToGcj(center)),
      zoom: 9.6,
      moving: false,
      polyLine: [],
      polyLineStyle: {
        strokeOpacity: 1,
        strokeWeight: 4,
        strokeColor: "#00d0ff",
        draggable: false,
        editable: false
      },
      visible: true
    };
  },
  computed: {
    ...mapState(["companyList"]),
    labelOptions() {
      if (!this.companyList?.length) return [];
      return this.companyList.map(e => {
        return {
          position: [Number(e.lng), Number(e.lat)],
          text: e.label,
          icon: {
            image: "/fabu-admin/imgs/poiMarker.png",
            anchor: "bottom-center",
            size: [25, 34],
            clipOrigin: [280, 0],
            clipSize: [50, 68]
          }
        };
      });
    }
  },
  mounted() {
    this.getPolyline();
  },
  methods: {
    clickMarker(item) {
      console.log("item");
      console.log(item);
    },
    getPolyline() {
      outline().then(({ data }) => {
        this.polyLine = data;
        this.polyLine.push(this.polyLine[0]);
      });
    },
    setMap() {},
    getMap() {
      return this.$refs.map.$$getInstance();
    }
  }
};
</script> -->
